<template>
  <div>
		<el-row type="flex" justify="center">
						
				<el-col :span="18">
					<div class="grid-content bg-purple" align="center">
						
						<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 90%">
							
							<el-table-column prop="date" label="日期">
							</el-table-column>
							
							<el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							
							<el-table-column prop="address" label="地址" width="180">
							</el-table-column>
							
							<el-table-column prop="electric" label="当前的金额" width="180">
							</el-table-column>
							
						</el-table>
					</div>
			</el-col>
	 
	</el-row>
	
  </div>
  
</template>

<script>
	
export default{
	
	data(){
		return {
		  tableData: [],
		  search: ''
		}
	},
	methods:{
		//查询相对应的信息
		 aaa(){
			 //自动加载
			this.$axios.post("/Convenience/Rising_Prices_find","id=1").then((res)=>{
				// console.log(res.data)
				console.log(res.data)
				this.tableData=res.data;
				console.log(this.tableData)
				
			})
			
			
			
			
			
		},
	},
	
	//自动加载初始化
	mounted: function(){
		this.aaa();//需要触发的函数
	},
	
	
	// created() {
	// 	this.aaa();
	// }
	
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
	  text-align: center;
    }
  }
  .el-col {
    border-radius: 4px;
  }
 /* .bg-purple-dark {
    background: #99a9bf;
  } */
  .bg-purple {
    background: #d3dce6;
  }
  /* .bg-purple-light {
    background: #e5e9f2;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
/*  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  } */
</style>